<!--
 * @Author: your name
 * @Date: 2020-08-31 11:41:18
 * @LastEditTime: 2020-09-08 15:12:49
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \admin-management\web\src\views\system\menu-list.vue
-->
<template>
  <div class="main-wrap">
    <toolbarTop :left="left" @refresh="refresh" @add="add" />
    <a-table rowKey="category_id" bordered size="middle" :columns="data.columns" :data-source="data.data">
      <template v-slot:operation="{ record }">
        <a-button @click="edit(record)" shape="circle" size="small">
          <template v-slot:icon><SvgIcon name="edit-square" /></template>
        </a-button>
        <a-popconfirm title="Sure to delete?" @confirm="del(record)">
          <a-button type="danger" shape="circle" size="small">
            <SvgIcon name="delete" />
          </a-button>
        </a-popconfirm>
      </template>
    </a-table>
    <ArticleCategoryDialog
      v-model:visible="dialog.visible"
      :all-category="data.data"
      v-if="dialog.visible"
      :data="dialog"
      :title="dialog.title"
      @refresh="refresh"
    />
  </div>
</template>

<script>
import { getCurrentInstance, reactive } from 'vue';
import ArticleCategoryDialog from './article-category-dialog';
import toolbarTop from '../../../components/toolbar/toolbar-top.vue';
export default {
  name: 'ArticleCategoryList',
  components: {
    ArticleCategoryDialog,
    toolbarTop
  },
  setup() {
    let { ctx } = getCurrentInstance();

    let left = [
      {
        text: '刷新',
        handleName: 'refresh'
      },
      {
        text: '新增',
        handleName: 'add'
      }
    ];

    function refresh() {
      getArticleCategory();
    }

    let data = reactive({
      data: [],
      columns: [
        {
          title: '分类id',
          dataIndex: 'category_id',
          key: 'category_id'
        },
        {
          title: '分类名称',
          dataIndex: 'name',
          key: 'name'
        },
        {
          title: '排序',
          dataIndex: 'sort',
          key: 'sort'
        },
        {
          title: '创建时间',
          dataIndex: 'create_time',
          key: 'create_time'
        },
        {
          title: '操作',
          dataIndex: 'operation',
          slots: { customRender: 'operation' }
        }
      ]
    });

    async function getArticleCategory() {
      let ArticleCategory = await ctx.$fetch.post('/content.article.category/list');
      data.data = ArticleCategory.data;
    }
    getArticleCategory();

    let dialog = reactive({
      title: '',
      visible: false,
      record: {},
      isAdd: false
    });
    function edit(record) {
      dialog.title = '编辑分类';
      dialog.visible = true;
      dialog.record = { ...record };
      dialog.isAdd = false;
    }
    function add() {
      dialog.title = '新增分类';
      dialog.visible = true;
      dialog.record = {};
      dialog.isAdd = true;
    }
    async function del(record) {
      let res = await ctx.$fetch.post('/content.article.category/delete', {
        category_id: record.category_id
      });
      ctx.$message.success(res.msg);
      refresh();
    }

    return {
      getArticleCategory,
      data,
      edit,
      dialog,
      left,
      refresh,
      add,
      del
    };
  }
};
</script>
